<template>
	<div>
		<el-card style="height: 1150px">
			<div class="cpu">
				<h3>CPU</h3>
				<hr color="cac6c6" size="0.1" />
				<el-table :data="cpuData" style="width: 100%">
					<el-table-column prop="cpuKey" label="属性"> </el-table-column>
					<el-table-column prop="value" label="值"> </el-table-column>
				</el-table>
			</div>
			<div class="size">
				<h3>内存</h3>
				<hr color="cac6c6" size="0.1" />
				<el-table :data="cpuData" style="width: 100%">
					<el-table-column prop="sizeKey" label="属性"> </el-table-column>
					<el-table-column prop="size" label="内存"> </el-table-column>
					<el-table-column prop="jvm" label="JVM"> </el-table-column>
				</el-table>
			</div>
			<div class="server">
				<h3>服务器信息</h3>
				<hr color="cac6c6" size="0.1" />
				<el-table :show-header="false" :data="serverData" style="width: 100%">
					<el-table-column prop="serverKey"> </el-table-column>
					<el-table-column prop="serverValue"> </el-table-column>
					<el-table-column prop="serverKey1"> </el-table-column>
					<el-table-column prop="serverValue1"> </el-table-column>
				</el-table>
			</div>
			<div class="server">
				<h3>Java虚拟机信息</h3>
				<hr color="cac6c6" size="0.1" />
				<el-table :show-header="false" :data="javaData" style="width: 100%">
					<el-table-column prop="javaKey"> </el-table-column>
					<el-table-column prop="javaValue"> </el-table-column>
					<el-table-column prop="javaKey1"> </el-table-column>
					<el-table-column prop="javaValue1"> </el-table-column>
				</el-table>
			</div>
			<div class="server">
				<h3>磁盘使用情况</h3>
				<hr color="cac6c6" size="0.1" />
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="name" label="盘符路径"> </el-table-column>
					<el-table-column prop="type" label="文件系统类型"> </el-table-column>
					<el-table-column prop="allSize" label="总大小"> </el-table-column>
					<el-table-column prop="freeSize" label="可用大小"> </el-table-column>
					<el-table-column prop="useSize" label="已用大小"> </el-table-column>
					<el-table-column prop="use" label="已用百分比"> </el-table-column>
				</el-table>
			</div>
		</el-card>
	</div>
</template>

<script>
import { findAllServerConf } from "../../../api/admin/system/server"

export default {
	name: "server",
	data() {
		return {
			javaData: [],
			serverData: [],
			cpuData: [],
			tableData: [],
			timeId: "",
		}
	},
	created() {
		const loading = this.$loading({
			lock: true,
			text: "加载中",
		})
		findAllServerConf().then((res) => {
			loading.close()
			this.cpuData = res.data.data.cpuList
			this.javaData = res.data.data.javaList
			this.serverData = res.data.data.serverList
			this.tableData = res.data.data.dir
		})
	},
	mounted() {
		this.init()
	},
	destroyed() {
		clearTimeout(this.timeId)
	},
	methods: {
		init() {
			let id = window.setInterval(() => {
				this.onLoad()
			}, 5000)
			this.timeId = id
		},
		onLoad() {
			findAllServerConf().then((res) => {
				this.cpuData = res.data.data.cpuList
				this.javaData = res.data.data.javaList
				this.serverData = res.data.data.serverList
				this.tableData = res.data.data.dir
			})
		},
	},
}
</script>
<style scoped lang="scss">
hr {
	color: #cac6c6;
}

.el-card ::v-deep .el-card__body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	& > * {
		margin-bottom: 8px;
		padding: 8px;
		box-sizing: border-box;
		box-shadow: 0 0 10px #cac6c6;
	}
}

.cpu,
.size {
	width: 49%;
}

.server {
	width: 100%;
	flex-basis: 100%;
}

// 去掉table的下边框线
.el-table::before {
	height: 0;
}
</style>
